<template>
  <div class="workbenchTimeFilter">
    <div>
      <slot></slot>
    </div>
    <div class="lable mb-12px flex items-center justify-between">
      <span>时间选择（单选）</span>
    </div>
    <div class="flex flex-wrap">
      <div
        class="ll_botton mb-12px"
        v-for="item in timelist"
        :key="item.value"
        @click="get_defaultDate(item.value)"
        :class="activetime.value === item.value ? 'active' : ''"
      >
        {{ item.lable }}
      </div>
    </div>
    <div class="lable mt-32px mb-11px">
      起止日期
      <span class="r_time">{{
        selectedTime.length > 0
          ? selectedTime[0] + " 至 " + selectedTime[1]
          : ""
      }}</span>
    </div>
    <LlDatePicker
      title="时间筛选"
      @cancel="showVisitTime = false"
      @confirm="confirm"
      type="range"
      :allowSame="true"
      visibleType="full"
      v-model="selectedTime"
      :showBottomArrow="false"
    />
  </div>
</template>

<script>
import bus from "@/config/evenrBus";
import moment from "moment";
import LlDatePicker from "@/components/ll-calendar";
import {
  getCurrentWeekdays,
  getCurrentMonth,
  getCurrentDays,
} from "@/utils/index.js";
export default {
  components: {
    LlDatePicker,
  },
  props: {
    timeType: {
      type: Number, //CurrentDays
      default: 0, //0-本月
    },
    region: {
      type: Boolean,
      default: true,
    },
    storeVue: {
      type: Object,
    },
  },
  data() {
    return {
      showVisitTime: false,
      timelist: [
        { lable: "本月", value: 0 },
        { lable: "本周", value: 1 },
        { lable: "今日", value: 2 },
        { lable: "自定义", value: 3 },
      ],
      selectedTime: [],
      activetime: {},
    };
  },
  mounted() {
    if (!this.region) {
      bus.$on("work_singleLocationShowTime", (res) => {
        //单个站点
        this.show = res;
        if (res) {
          this.getSelectedDataActiv(this.storeVue.name);
        }
      });
    } else {
      bus.$on("work_selectDataFilterShowTime", (res) => {
        //全部站点
        this.show = res;
        if (res) {
          this.getSelectedDataActiv(this.storeVue.name);
        }
      });
    }
    this.get_defaultDate(this.timeType);
  },
  methods: {
    getSelectedDataActiv(nameKey) {
      //回显示数据
      let list = this.$store.state.work[nameKey];
      if (list._RegionTimeKeyName && list._RegionTimeKeyName[0]) {
        let indexs = list._RegionTimeKeyName[0].selectIndex;
        let selectTime = list._RegionTimeKeyName[0].name.split(" ");
        this.get_defaultDate(indexs);
        if (indexs == 3) {
          this.selectedTime = [selectTime[0], selectTime[2]];
        }
      } else {
        this.get_defaultDate(0);
      }
    },
    get_defaultDate(type) {
      switch (type) {
        case 0:
          this.selectedTime = getCurrentMonth();
          this.$emit("selectedTime", { key: 0, value: getCurrentMonth() });
          break;
        case 1:
          this.selectedTime = getCurrentWeekdays();
          this.$emit("selectedTime", { key: 1, value: getCurrentWeekdays() });
          break;
        case 2:
          this.selectedTime = getCurrentDays();
          this.$emit("selectedTime", { key: 2, value: getCurrentDays() });
          break;
        case 3:
          this.selectedTime = [];
          this.$emit("selectedTime", { key: 3, value: null });
          break;
        default:
          this.selectedTime = [];
          this.$emit("selectedTime", null);
      }
      this.activetime = this.timelist[type];
    },
    // 选择日期
    confirm(val) {
      this.selectedTime = [
        moment(val[0]).format("YYYY-MM-DD"),
        moment(val[1]).format("YYYY-MM-DD"),
      ];
      this.activetime = { lable: "自定义", value: 3 };
      this.$emit("selectedTime", { key: 3, value: this.selectedTime });
    },
  },
};
</script>

<style lang="scss" scopde>
.workbenchTimeFilter {
  font-family: PingFangSC-Medium, PingFang SC;
  .van-icon {
    height: 17px;
    font-size: 17px;
  }
  .title {
    font-size: 14px;
    font-weight: 500;
    color: #333333;
  }
  .lable {
    height: 20px;
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    overflow: hidden;
    .r_time {
      font-size: 10px;
      color: #666666;
      font-weight: 400;
      float: right;
    }
  }
  .ll_botton {
    width: 80px;
    height: 32px;
    background: #f5f5f5;
    border-radius: 16px;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #f5f5f5;
    margin-right: 5px;
    font-family: PingFangSC-Regular, PingFang SC;
  }
  .active {
    background-color: rgba(29, 111, 233, 0.1) !important;
    border-radius: 16px;
    border: 1px solid #1d6fe9 !important;
    color: #1d6fe9;
    font-weight: 600 !important;
  }
  .ll_botton:last-child {
    margin-right: 0;
    width: 87px;
  }
}
</style>
